<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="fee-tlt">
    <div class="tlt-name">
      <span class="tag-name">{{ fee.feeName }}</span>
      <span class="tag-online">线下费用</span>
      <span class="tag-cost" v-if="fee.costTypeName">{{ fee.costTypeName }}</span>
    </div>
    <div class="tlt-price">{{ fee.costType == 20 ? '应付' : '应收' }}：{{ unitVal(fee.totalAmount, '元') }}</div>
  </div>
  <div style="margin-bottom: 24px">
    <div class="fee-msg">
      <div class="msg">
        <div class="msg-tlt"><span>订单号：</span>{{ fee.shortOrder.orderCode || '-' }}</div>
        <div class="msg-tlt"><span>承租人：</span>{{ fee.shortOrder.memberName || '-' }}</div>
        <div class="msg-tlt"><span>车牌号：</span>{{ fee.shortOrder.carLicenseNo || '-' }}</div>
        <div class="msg-tlt times"
          ><span>租赁周期：</span>{{ fee.shortOrder.startTime }} - {{ fee.shortOrder.endTime }}（{{ fee.shortOrder.rentDays }}）</div
        >
      </div>
      <div class="msg-open" @click="showFee" v-if="fee.depositDetailList && !feeShow">展开 <icon-down /></div>
      <div class="msg-open" @click="showFee" v-if="fee.depositDetailList && feeShow">收起 <icon-up /></div>
    </div>
    <div class="line" v-if="feeShow">
      <div></div>
    </div>
    <template v-if="feeShow">
      <a-divider :margin="0" v-if="!feeShow && fee.depositDetailList" />
      <div class="fee-table" v-if="fee.depositDetailList">
        <div class="table-items" v-for="(item, index) in fee.depositDetailList" :key="index">
          <div class="item-row">
            <div class="item-pro" @click="openList(item.id)"
              >{{ item.depositTypeName }}
              <span class="open-icon" v-if="fee.depositDetailList && item.show"><icon-caret-up /></span>
              <span class="open-icon-close" v-if="fee.depositDetailList && !item.show"><icon-caret-down /></span>
            </div>
            <div class="item-pro"></div>
            <div class="item-pro"></div>
            <div class="item-pro item-remark">{{ item.remark }}</div>
          </div>
          <block v-if="fee.depositDetailList && !item.show">
            <div class="item-row" v-for="(i, x) in fee.depositDetailList" :key="x">
              <div class="item-pro item-name item-pro-twice">{{ i.depositTypeName }}</div>
              <div class="item-pro item-cost">{{ i.costTypeName }}</div>
              <div class="item-pro item-amount">{{ unitVal(i.totalAmount, '元') }}</div>
              <div class="item-pro item-remark">{{ i.remark }}</div>
            </div>
          </block>
        </div>
      </div>
    </template>
    <div class="amount-all" v-if="feeShow">
      <div class="line">
        <div></div>
      </div>
      <div class="amount"> {{ fee.costType == 20 ? '待付' : '待收' }}：{{ unitVal(fee.totalAmount, '元') }} </div>
    </div>
  </div>
</template>

<script setup name="ShortOrderCost">
  import { unitVal } from '@/utils'
  import { onMounted, ref } from 'vue'
  const feeShow = ref(true)
  const showFee = () => {
    feeShow.value = !feeShow.value
  }
  const props = defineProps({
    fee: {},
  })
  const openList = (id) => {
    props.fee.depositDetailList.forEach((el) => {
      if (el.id == id) {
        el.show = el.show ? !el.show : true
        console.log(el.show)
      }
    })
  }
  onMounted(() => {})
</script>

<style lang="less" scoped>
  .fee-tlt {
    width: 100%;
    height: 40px;
    background-color: #f2f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tlt-name {
      .tag-name {
        font-weight: 600;
        font-size: 14px;
        margin-left: 20px;
      }
      .tag-online {
        font-size: 12px;
        padding: 0 8px;
        border-radius: 2px;
        border: 1px solid #3491fa;
        color: #3491fa;
        background: #e8f7ff;
        margin-left: 12px;
      }
      .tag-cost {
        font-size: 12px;
        padding: 0 8px;
        border-radius: 2px;
        border: 1px solid #ff7d00;
        color: #ff7d00;
        background: #fff7e8;
        margin-left: 12px;
      }
    }
    .tlt-price {
      font-size: 14px;
      color: #1890ff;
      font-weight: 600;
      margin-right: 20px;
    }
  }
  .fee-msg {
    background: #fbfbfc;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-top: 20px;
    .msg {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-left: 20px;
      div {
        width: 33.33%;
        margin-bottom: 12px;
      }
      .msg-tlt {
        color: var(--color-neutral-10);
        span {
          color: var(--color-neutral-8);
        }
      }
      .times {
        width: 66.66%;
      }
    }
    .msg-open {
      color: #1890ff;
      font-size: 14px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .line {
    width: 100%;
    background-color: #fbfbfc;
    div {
      width: calc(100% - 40px);
      margin-left: 20px;
      height: 1px;
      background-color: #f2f3f5;
    }
  }
  .amount-all {
    background-color: #fbfbfc;
    .amount {
      width: 100%;
      height: 62px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 20px;
    }
  }
  .fee-table {
    background: #fbfbfc;
    padding: 24px;
    width: 100%;
    .table-items {
      .item-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .item-pro {
          font-weight: 600;
          width: 200px;
          margin-bottom: 12px;
          cursor: pointer;
        }
        .item-pro-twice {
          font-weight: 400;
          margin-left: 14px;
        }
        .open-icon {
          margin-left: 2px;
        }
        .open-icon-close {
          transform: rotate(180deg);
        }
        .item-name {
          width: 30%;
        }
        .item-cost {
          width: 15%;
        }
        .item-amount {
          width: 15%;
          font-weight: 400;
        }
        .item-remark {
          width: 40%;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
</style>
